import React from 'react';

export default class view extends React.Component {
    static propTypes = {
        className: React.PropTypes.string,
        titleText: React.PropTypes.string.isRequired,
        titleColor: React.PropTypes.string,
        activeClass: React.PropTypes.string,
        open: React.PropTypes.bool,
        descriptionText: React.PropTypes.string,
        disabled: React.PropTypes.bool,
        nestedItems: React.PropTypes.array,
        onNestedToggle: React.PropTypes.func,
        onClick: React.PropTypes.func,
        leftIcon: React.PropTypes.element,
        rightIcon: React.PropTypes.element,
        iconAlign: React.PropTypes.string
    };

    static defaultProps = {
        open: true,
        iconAlign: 'right',
        onNestedToggle: () => {},
        onClick: () => {}
    }

    constructor(props, context) {

        super(props, context);
        // init state;
        this.state = {
            open: props.open,
            styleTitle: {}
        };
    }

    componentWillMount() {
        this._isMounted = true;
        this.setStyleTitle(this.props.titleColor);
    }

    componentWillReceiveProps({ open }) {

        this.setState({
            open
        });

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    setStyleTitle(titleColor) {
        if (titleColor) {
            this.setState({
                styleTitle: {
                    color: titleColor
                }
            });
        }
    }

    renderIcon() {
        if (this.props.iconAlign === 'right') {
            if (this.props.open !== undefined) {
                return this.renderRightIcon(this.renderToggleIcon());
            } else {
                if (this.props.rightIcon) {
                    return this.renderRightIcon(this.props.rightIcon);
                } else {
                    return '';
                }
            }
            if (this.props.leftIcon) {
                return this.renderLeftIcon(this.props.leftIcon);
            }
        } else if (this.props.iconAlign === 'left') {
            if (this.props.open !== undefined) {
                return this.renderLeftIcon(this.renderToggleIcon());
            } else {
                if (this.props.leftIcon) {
                    return this.renderLeftIcon(this.props.leftIcon);
                } else {
                    return '';
                }
            }
            if (this.props.rightIcon) {
                return this.renderRightIcon(this.props.rightIcon);
            }
        }
    }

    renderLeftIcon(component) {
        return (
            <div className="left icon-left">{component}</div>
        );
    }

    renderRightIcon(component) {
        return (
            <div className="right icon-right">{component}</div>
        );
    }

    renderDescriptionText(text) {
        return (
            <div className="description">{text}</div>
        );
    }

    renderToggleIcon() {
        return (
            <div onTouchTap={(e) => this.handleBtnToggleClick(e)}
                 className={"icon icon-relist-toggle" + (this.state.open ? ' show' : '')}>
                <span></span>
            </div>
        );
    }

    handleBtnToggleClick(event) {
        // event.preventDefault()
        event.stopPropagation();
        this.setState({
            open: !this.state.open
        });
        return false;
    }

    handleToggleClick() {
        if (!this.props.disabled) {
            this.setState({
                open: !this.state.open
            }, () => {
                this.props.onNestedToggle(this.state.open);
            });
        }

        this.props.onClick();
    }

    render() {
        return (
            <div
                className={this.props.className ? "orin-sw-relistitem-root " + this.props.className : "orin-sw-relistitem-root"}>
                <div className={"orin-sw-relistitem-root-title" + (this.props.activeClass ?  " "+this.props.activeClass : "")}
                     onTouchTap={(e) => this.handleToggleClick()}>
                    {this.renderIcon()}
                    <div className="auto">
                        <div className="text">
                            <div className="title" style={this.state.styleTitle}>{this.props.titleText}</div>
                            {this.props.descriptionText ? this.renderDescriptionText(this.props.descriptionText) : ''}
                        </div>
                    </div>
                </div>
                <div className={"orin-sw-relistitem-root-list" + (this.state.open ? ' show' : '' ) }>
                    {
                        this.props.nestedItems ?
                            this.props.nestedItems.map(function (item) {
                                return item
                            })
                            : ''
                    }
                </div>
            </div>
        );
    }
}
